<template>
  <div class="app-container dailyContainer ">
    <div class="customContainer">
      <!-- 搜索头 -->
      <el-form :inline="true" :model="formInline" ref="formInline" class="demo-form-inline" size="small">
        <el-form-item>
          <el-date-picker :editable="false" :clearable="false" v-model="pickerDate" value-format="yyyy-MM-dd" type="date" placeholder="选择日期"
            :picker-options="pickerOptions" @change="dataChange"></el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-select filterable placeholder="选择门店" v-model="formInline.store_id" @change="storeChange">
            <el-option v-for="item in storeList" :key="item.id" :label="item.name" :value="item.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <dj-button size="small" @search="searchClick" />
        </el-form-item>
      </el-form>
      <!-- tap标签分类 -->
      <el-tabs v-model="formInline.type" @tab-click="handleClick">
        <el-tab-pane label="收银台" name="1"></el-tab-pane>
        <el-tab-pane label="杂项入账" name="0"></el-tab-pane>
        <el-tab-pane label="兑币机" name="2"></el-tab-pane>
      </el-tabs>
      <transition name="fade" mode="out-in">
        <!-- 表格 -->
        <el-table  height="calc(100vh - 300px)" highlight-current-row :data="list" v-loading.body="listLoading" border size="small" :key="formInline.type">
          <el-table-column align="center" :label="formInline.type==1?'区域':'杂项区域'" v-if="formInline.type*1<2">
            <template slot-scope="scope">
              <el-select placeholder="选择区域" v-model="scope.row.area_id" :disabled="!scope.row.is_edit" size="small">
                <el-option v-for="item in areaList" :key="item.id" :label="item.name" :value="item.id"></el-option>
              </el-select>
            </template>
          </el-table-column>
          <el-table-column align="center" label='杂项类型' v-if="formInline.type==0">
            <template slot-scope="scope">
              <el-select placeholder="选择类型" v-model="scope.row.others_id" :disabled="!scope.row.is_edit" size="small">
                <el-option v-for="item in othersList" :key="item.id" :label="item.name" :value="item.id"></el-option>
              </el-select>
            </template>
          </el-table-column>
          <el-table-column align="center" label='机台编号' v-if="is_dui">
            <template slot-scope="scope">
              {{scope.row.area_name+'-'+scope.row.no}}
            </template>
          </el-table-column>
          <el-table-column align="center" label='机台名称' prop="name" v-if="is_dui"></el-table-column>
          <el-table-column align="center" label='时间' prop="datetime"></el-table-column>
          <el-table-column align="center" label='交账店员'>
            <template slot-scope="scope">
              <el-select v-if="formInline.type==1" :disabled="!scope.row.is_edit" placeholder="选择店员" v-model="scope.row.clerk" size="small">
                <el-option v-for="item in clerkList" :key="item.id" :label="item.nick" :value="item.id"></el-option>
              </el-select>
              <span v-else>
                {{scope.row.nick?scope.row.nick:'-'}}
              </span>
            </template>
          </el-table-column>
          <el-table-column align="center" label='支付渠道'>
            <template slot-scope="scope">
              <p>现金</p>
              <p v-if="formInline.type!=1">支付宝</p>
              <p v-if="formInline.type!=1">微信</p>
              <p v-if="formInline.type!=2">银行卡</p>
              <p v-if="formInline.type!=2">代收待核</p>
            </template>
          </el-table-column>
          <el-table-column align="center" label='金额'>
            <template slot-scope="scope">
              <!-- 现金 -->
              <p>
                <el-input :disabled="!scope.row.is_edit" style="max-width:200px" type="number" onmousewheel="return false;" onkeypress="return event.which<=69"
                  placeholder="请输入金额" size="small" v-model="scope.row.cash_actual"></el-input>
              </p>
              <!-- 支付宝 -->
              <p v-if="formInline.type!=1">
                <el-input :disabled="!scope.row.is_edit" style="max-width:200px" type="number" onmousewheel="return false;" onkeypress="return event.which<=69"
                  placeholder="请输入金额" size="small" v-model="scope.row.money_aliy"></el-input>
              </p>
              <!-- 微信 -->
              <p v-if="formInline.type!=1">
                <el-input :disabled="!scope.row.is_edit" style="max-width:200px" type="number" onmousewheel="return false;" onkeypress="return event.which<=69"
                  placeholder="请输入金额" size="small" v-model="scope.row.money_wx"></el-input>
              </p>
              <!-- 银行卡 -->
              <p v-if="formInline.type!=2">
                <el-input :disabled="!scope.row.is_edit" style="max-width:200px" type="number" onmousewheel="return false;" onkeypress="return event.which<=69"
                  placeholder="请输入金额" size="small" v-model="scope.row.bank_actual"></el-input>
              </p>
              <!-- 代收待核 -->
              <p v-if="formInline.type!=2">
                <el-input :disabled="!scope.row.is_edit" style="max-width:200px" type="number" onmousewheel="return false;" onkeypress="return event.which<=69"
                  placeholder="请输入金额" size="small" v-model="scope.row.collecting_actual"></el-input>
              </p>
            </template>
          </el-table-column>
          <el-table-column align="center" label='备注' v-if="formInline.type==0">
            <template slot-scope="scope">
              <el-input :maxlength="150" :rows="3" style="max-width:200px" v-model="scope.row.remark" :disabled="!scope.row.is_edit" type="textarea"
                placeholder="请输入备注，最多150字"></el-input>
            </template>
          </el-table-column>
          <el-table-column align="center" label='操作'>
            <template slot-scope="scope">
              <el-button v-if="scope.row.is_edit" type="success" size="mini" @click="saveClick(scope.row)">保存</el-button>
              <el-button v-else type="primary" icon="el-icon-edit" size="mini" @click="editClick(scope.row)"></el-button>
            </template>
          </el-table-column>
        </el-table>
      </transition>
      <p style="border:1px solid  #dedede;text-align:center;background: #fff;border-radius: 4px" v-if="formInline.type==1||formInline.type==0">
        <el-button type="text" @click="addClick">新增记录
          <i class="el-icon-circle-plus-outline"></i>
        </el-button>
      </p>
    </div>
  </div>
</template>

<script>
import { getList, getStoreList, getBrandList, getClerkList, getOthersList, getAreaList, save } from '@/api/finance/daily';
export default {
  data() {
    return {
      is_dui: false,
      get_url: '/Finance/actual_info',
      save_url: '/finance/actual_income',
      list: [],
      listLoading: false,
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() > Date.now();
        }
      },
      pickerDate: new Date(Date.UTC(new Date().getFullYear(), new Date().getMonth(), new Date().getDate())).toISOString().slice(0, 10),
      storeList: [],
      brandList: [],
      othersList: [],
      areaList: [],
      clerkList: [],
      formInline: {
        store_id: '',
        datetime: '',
        type: '1'
      }
    };
  },
  created() {
    this.getStore();
  },
  methods: {
    saveClick(row) {
      const validate_money = /^([1-9][\d]{0,7}|0)(\.[\d]{1,2})?$/;
      const minus_money = /^\-?([1-9][\d]{0,7}|0)(\.[\d]{1,2})?$/;
      switch (this.formInline.type) {
        case '1':
          if (!minus_money.test(row.cash_actual) || !validate_money.test(row.bank_actual) || !validate_money.test(row.collecting_actual)) {
            this.$message({ type: 'error', message: '请按正确的格式将所有金额填写完整' });
            return;
          }
          if (!row.area_id || !row.clerk) {
            this.$message({ type: 'error', message: '选择区域和交账店员' });
            return;
          }
          this.get_url = '/Finance/actual_info';
          this.save_url = '/finance/actual_income';
          break;
        case '0':
          if (
            !validate_money.test(row.cash_actual) ||
            !validate_money.test(row.bank_actual) ||
            !validate_money.test(row.money_aliy) ||
            !validate_money.test(row.money_wx)
          ) {
            this.$message({ type: 'error', message: '请按正确的格式将所有金额填写完整' });
            return;
          }
          if (!row.others_id || !row.area_id) {
            this.$message({ type: 'error', message: '请选择杂项区域和类型' });
            return;
          }
          this.get_url = '/Finance/sundry_enter_list';
          this.save_url = '/Finance/sundry_enter_submit';
          break;
        case '2':
          if (!validate_money.test(row.cash_actual) || !validate_money.test(row.money_aliy) || !validate_money.test(row.money_wx)) {
            this.$message({ type: 'error', message: '请按正确的格式将所有金额填写完整' });
            return;
          }
          this.get_url = '/Finance/coins_project_enter_list';
          this.save_url = '/Finance/sundry_enter_submit';
          break;
      }
      save(row, this.save_url).then(response => {
        this.$message({ type: response.code == 1 ? 'success' : 'error', message: response.message });
        if (response.code == 1) {
          if (this.formInline.type == 1 && response.id) {
            row.id = response.id;
          }
          row.is_edit = false;
        }
      });
    },
    addClick() {
      const form_date = (this.formInline.datetime = this.pickerDate ? this.pickerDate : '');
      this.list.push({
        add: 1,
        is_edit: true,
        bank_actual: '',
        cash_actual: '',
        nick: '',
        collecting_actual: '',
        datetime: form_date,
        remark: '',
        store_id: this.formInline.store_id,
        others_id: '',
        area_id: '',
        type: this.formInline.type
      });
    },
    editClick(row) {
      row.is_edit = true;
      row.add = 0;
    },
    // tab切换搜索
    handleClick(tab, event) {
      switch (this.formInline.type) {
        case '1':
          this.get_url = '/Finance/actual_info';
          this.save_url = '/finance/actual_income';
          break;
        case '0':
          this.get_url = '/Finance/sundry_enter_list';
          this.save_url = '/Finance/sundry_enter_submit';
          this.getOthers();
          break;
        case '2':
          this.get_url = '/Finance/coins_project_enter_list';
          this.save_url = '/Finance/sundry_enter_submit';
          break;
      }
      this.searchClick();
    },
    getStore() {
      getStoreList({ category_id: 25 }).then(response => {
        this.storeList = response;
        let data = response.filter(res => res.id == this.$store.getters.optionId);
        if (data.length > 0) {
          this.formInline.store_id = data[0].id;
        } else {
          if (this.storeList.length > 0) {
            this.formInline.store_id = this.storeList[0].id;
          }
        }
        this.storeChange();
      });
    },
    storeChange() {
      this.formInline.clerk = '';
      this.formInline.datetime = this.pickerDate ? this.pickerDate : '';
      this.getClerk();
      this.getOthers();
      this.getArea();
    },
    dataChange() {
      this.formInline.datetime = this.pickerDate ? this.pickerDate : '';
      this.getClerk();
    },
    getArea() {
      getAreaList({ sid: this.formInline.store_id }).then(response => {
        this.areaList = response;
      });
    },
    getOthers() {
      getOthersList({ store_id: this.formInline.store_id }).then(response => {
        this.othersList = response;
      });
    },
    getClerk() {
      getClerkList({ datetime: this.formInline.datetime, store_id: this.formInline.store_id }).then(response => {
        this.clerkList = response;
        this.searchClick();
      });
    },
    // 搜索
    searchClick() {
      this.formInline.datetime = this.pickerDate ? this.pickerDate : '';
      this.fetchData();
    },
    // 列表获取
    fetchData() {
      this.listLoading = true;
      const that = this;
      getList(this.formInline, this.get_url)
        .then(response => {
          response.forEach(function(val, i) {
            val.is_edit = false;
          });
          this.list = response;
          const form_date = (this.formInline.datetime = this.pickerDate ? this.pickerDate : '');
          if (this.formInline.type != 2 && response.length == 0) {
            this.list.push({
              is_edit: true,
              bank_actual: '',
              cash_actual: '',
              nick: '',
              collecting_actual: '',
              datetime: form_date,
              remark: '',
              store_id: this.formInline.store_id
            });
          }
          this.is_dui = this.formInline.type == 2 ? true : false;
          this.list.forEach(function(val, i) {
            val.type = that.formInline.type;
            val.store_id = that.formInline.store_id;
          });
          this.listLoading = false;
        })
        .catch(res => {
          this.listLoading = false;
        });
    }
  }
};
</script>
<style rel="stylesheet/scss" lang="scss">
.dailyContainer {
  .el-table {
    margin: 0;
  }

  .el-table .cell {
    padding: 0 !important;
    line-height: 36px;
  }

  .el-table--small td,
  .el-table--small th {
    padding: 0;
  }

  .dailyContainer .el-table .cell {
    padding: 0 !important;
    line-height: 36px;
  }

  td p {
    border-bottom: 1px solid #dedede;
    line-height: 36px;
    height: 36px;
    padding: 0;
    margin: 0;
  }

  td p:last-child {
    border: none;
    padding: 0;
  }
}
</style>